<template>
    <div class="ontheway">
        <div class="searchFormBox">
            <el-form ref="searchForm" :model="searchForm" :rules="searchRules" :inline="true" size="mini"> 
              <el-form-item prop="contractNo" label="合同号:" >
                    <el-input v-model="searchForm.contractNo" style="width:180px" clearable placeholder="请输入合同号"></el-input>
                </el-form-item> 
                <el-form-item prop="trkNo" label="车牌号:" >
                    <el-input v-model="searchForm.trkNo" style="width:180px" clearable placeholder="请输入车牌号"></el-input>
                </el-form-item>
               <el-form-item prop="drvName" label="司机:" >
                    <el-input v-model="searchForm.drvName" style="width:180px" clearable placeholder="请输入司机名"></el-input>
                </el-form-item>
                <el-form-item prop="start"  label="运单时间:" >
                  <el-date-picker v-model="searchForm.start" style="width:180px" clearable :picker-options="startPickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item prop="end" label="—" label-width="20px">
                  <el-date-picker v-model="searchForm.end" style="width:180px" clearable :picker-options="endPickerOptions" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchBtn">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <trainComponent ref="child"
         :rise="rise" :end="end" :searchNumber="searchNumber" :startTime="startTime" :endTime="endTime"></trainComponent>
        <div class="table">
          <el-table  border
              :header-cell-style="{ textAlign: 'center' }"
              height="300"
              highlight-current-row
              :data="tableData"
              @row-click="rowClick"
              >
              <!-- <el-table-column
                align="center"
                label="在线"
                width="60"
                prop="online"
                show-overflow-tooltip
            >
            <template slot-scope="scope">
              <span v-if="scope.row.online =='N'">离线</span>
              <span v-if="scope.row.online =='Y'">在线</span>
            </template>
          </el-table-column> -->
              <el-table-column   align="center" prop="waContractNo"  label="合同号" show-overflow-tooltip  width="140"></el-table-column>
              <el-table-column   align="center" prop="wayBillNum" label="运单号" show-overflow-tooltip  width="160">
                  <template slot-scope="scope">
                      <u style="color:red" @click="aaa(scope.row.wayBillNum)">{{scope.row.wayBillNum}}</u>
                  </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="运单状态"
                width="70"
                prop="status"
                show-overflow-tooltip
            >
            <template slot-scope="scope">
              <span v-if="scope.row.status =='WC'">完成</span>
              <!-- <span v-else-if="scope.row.status =='XH'">即将完成</span> -->
              <span v-else>在运</span>
            </template>
          </el-table-column>
              <el-table-column   align="center" prop="truckNo"  label="车牌号" show-overflow-tooltip  width="100"></el-table-column>
              <el-table-column   align="center" prop="drverName"  label="司机" show-overflow-tooltip  width="90"></el-table-column>
              <el-table-column   align="center" prop="drverTel"  label="联系电话" show-overflow-tooltip  width="100"></el-table-column>
              
              
          </el-table>
        </div>
    </div>  
</template>

<script>
import bus from '@/utils/bus'
import trainComponent from './trackQuery'
import {getWayBillInfoList} from '@/request/api'
export default {
    components: {
        trainComponent
    },
    data() {
        return {
          rise:'',
          end:'',
          searchNumber:'',
          startTime:'',
          endTime:'',
          searchForm: {
            contractNo:'',
                trkNo: '',
                drvName:'',
                start:'',
                end:''
            },
            searchRules: {

            },
            showSearchForm: false,
            childMsg: '',
            groundStartTime: '',
            groundEndTime: '',
            tableData:[],
            list:[]
        }
    },
  
    computed: {
      startPickerOptions() {
        return {
          disabledDate: (date) => {
            if (!this.searchForm.start) return false
            return (date.getTime()) > (new Date(this.searchForm.start).getTime())
          }
        }
      },
      endPickerOptions() {
        return {
          disabledDate: (date) => {
            if (!this.searchForm.end) return false
            return (date.getTime()) < (new Date(this.searchForm.end).getTime())
          }
        }
      }
    },
    mounted(){
        this.getList()
    },
    methods: {
        searchBtn() {
            this.getList()
        },
        aaa(biilNumn){
          this.list = {
            mdlName: '运单动态确认',
            mdlUrl: '/waybill/twoWaybill/waybillDetermine',
            mdlSeq: 1,
            mdlId: 380,
            moduleChildrenGrand: [
              {
                mdlCode: 'undoWayBill',
                mdlName: '撤销运单',
                mdlSeq: 1
              },
              {
                mdlCode: 'arriveConfirm',
                mdlName: '抵达装货确认',
                mdlSeq: 2
              },
              {
                mdlCode: 'loadCompletion',
                mdlName: '装货完成确认',
                mdlSeq: 3
              },
              {
                mdlCode: 'arriveXhConfirm',
                mdlName: '抵达卸货确认',
                mdlSeq: 4
              },
              {
                mdlCode: 'xhConfirm',
                mdlName: '卸货完成确认',
                mdlSeq: 5
              },
              {
                mdlCode: 'wayBillConfirm',
                mdlName: '运单完成确认',
                mdlSeq: 6
              }
            ]
          }
            this.$store.commit('user/SET_NAV_BUTTON', this.list)
            this.$router.push('/layout/waybill/twoWaybill/waybillDetermine')
            bus.$emit('wayBillNum',biilNumn)
        },
        getList(){
            // if(this.searchForm.start===''){
            //     var time = new Date()
            //     this.searchForm.start = this.formmate(time)
            //     }
            // if(this.searchForm.end===''){
            //     var time = new Date()
            //     this.searchForm.end = this.formmate(time)
            //     }
            getWayBillInfoList({contractNo:this.searchForm.contractNo,trkNo:this.searchForm.trkNo,drvName:this.searchForm.drvName,start:this.searchForm.start,end:this.searchForm.end,fltUuid:this.$store.state.user.FLT_UUID_DX_H}).then(res =>{
                this.tableData = res.data
            })
        },
        // formmate(str) {
        //     const date = new Date(str)
        //     const year = date.getFullYear()
        //     const month = date.getMonth() + 1
        //     const day = date.getDate()
        //     return `${year}-${month}-${day}`
        // },
     formatTen (num) {
      return num > 9 ? num + '' : '0' + num
    },
    formatDate (date) {
      var date = new Date(date)
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      if (hour < 10) {
        hour = '0' + hour
      }
      var minute = date.getMinutes()
      if (minute < 10) {
        minute = '0' + minute
      }
      var second = date.getSeconds()
      if (second < 10) {
        second = '0' + second
      }
      return (
        year +
        '-' +
        this.formatTen(month) +
        '-' +
        this.formatTen(day) +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
      )
    },
        //获取当前行
        rowClick(row){
          // this.rise = '广西壮族自治区南宁市兴宁区945弄',
          // this.end = '北京市东城区1145弄',
          this.rise = row.wabPlaceof
          this.end = row.wabReceplace
          this.searchNumber = row.truckNo
          this.startTime=row.created
          let time = new Date()
          this.endTime=this.formatDate(time)
          // this.$nextTick(()=>{
          //    this.$refs.child.search_step2()
          // })
          //定时器也可以
          if(row.status == 'WC'){
             setTimeout(()=>{
              this.$refs.child.search_step2()
            },100)
          }
          if(row.status == 'PC'){
             setTimeout(()=>{
              this.$refs.child.search_step1()
            },100)
          }
         
        
        }
    } 
}
</script>

<style lang="scss" scope>
   ::v-deep .el-table td, .el-table th.is-leaf{
    padding: 0;
    height: 70px;
    }
   .el-form-item__label{
    padding: 0 5px 0 0;
    }
.ontheway {
    width: 100%;
    height: 100%;
    position: relative;
    .searchFormBox {
        position: absolute;
        z-index: 99;
        top:5px;
        left:60px;
    }
    .table{
        position: absolute;
        z-index: 10;
        top: 35px;
        right:5px;
        width: 600px;
        height: 400px;
    }

.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
}
}
</style>